import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import Components from 'unplugin-vue-components/vite' // https://github.com/antfu/unplugin-vue-components
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import UnoCSS from 'unocss/vite'
import AutoImport from 'unplugin-auto-import/vite'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
	const env = loadEnv(mode, process.cwd())

	return {
		base: './', // 根路径，也就是项目的基础路径
		server: {
			host: env.VITE_DEV_HOST || '127.0.0.1',
			port: parseInt(env.VITE_DEV_POST || '5173'),
			open: false,
			// 开发服务器优化配置
			fs: {
				// 限制文件系统监听范围，提高性能
				allow: ['..']
			},
			// 预构建优化
			optimizeDeps: {
				include: [
					'vue',
					'vue-router',
					'pinia',
					'axios',
					'dayjs',
					'ant-design-vue',
					'@ant-design/icons-vue',
					'@iconify/vue'
				],
				// 强制预构建这些依赖
				force: true
			},
			// 热更新优化
			watch: {
				// 减少监听的文件数量
				ignored: [
					'**/.git/**',
					'**/node_modules/**',
					'**/dist/**',
					// IDE 生成文件
					'**/.vscode/**',
					'**/.idea/**',
					'*.code-workspace',
					'*.sublime-*',
					'*.swp',
					'*.swo',
					'*~',
					'#*#',
					'.#*',
					'*.suo',
					'*.user',
					'**/.settings/**',
					'*.project',
					'*.classpath'
				]
			}
		},
		build: {
			// 代码分割策略配置
			rollupOptions: {
				output: {
					// 手动分包策略
					manualChunks(id) {
						// 将 node_modules 中的依赖包进行分包
						if (id.includes('node_modules')) {
							// 将 ant-design-vue 单独分包
							if (id.includes('ant-design-vue')) {
								return 'antd'
							}
							// 将 vue 相关包单独分包
							if (id.includes('vue') && !id.includes('vue-router')) {
								return 'vue'
							}
							// 将 vue-router 单独分包
							if (id.includes('vue-router')) {
								return 'vue-router'
							}
							// 将 pinia 单独分包
							if (id.includes('pinia')) {
								return 'pinia'
							}
							// 将 axios 单独分包
							if (id.includes('axios')) {
								return 'axios'
							}
							// 将 lodash 单独分包
							if (id.includes('lodash')) {
								return 'lodash'
							}
							// 将 dayjs 单独分包
							if (id.includes('dayjs')) {
								return 'dayjs'
							}
							// 将图标库单独分包
							if (id.includes('@iconify')) {
								return 'iconify'
							}
							// 其他第三方库统一分包
							return 'vendor'
						}
						// 将路由页面按模块分包
						if (id.includes('src/views/')) {
							const match = id.match(/src\/views\/([^/]+)/)
							if (match) {
								const moduleName = match[1]
								// 将测试页面统一分包
								if (moduleName === 'test') {
									return 'test-module'
								}
								// 将权限管理页面统一分包
								if (moduleName === 'rbac') {
									return 'rbac-module'
								}
								// 将商品管理页面统一分包
								if (moduleName === 'product') {
									return 'product-module'
								}
								// 将基础数据页面统一分包
								if (moduleName === 'baseData') {
									return 'base-data-module'
								}
								// 其他页面按目录分包
								return `${moduleName}-module`
							}
						}
					},
					// 配置 chunk 文件命名规则
					chunkFileNames: 'assets/js/[name]-[hash].js',
					entryFileNames: 'assets/js/[name]-[hash].js',
					assetFileNames: assetInfo => {
						const extType = assetInfo.name?.split('.')[1]
						if (extType && /png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
							return 'assets/images/[name]-[hash][extname]'
						}
						if (extType && /woff|woff2|eot|ttf|otf/i.test(extType)) {
							return 'assets/fonts/[name]-[hash][extname]'
						}
						return 'assets/[name]-[hash][extname]'
					}
				}
			},
			// 构建优化配置
			target: 'es2015',
			minify: 'esbuild',
			sourcemap: false,
			// 启用 chunk 大小警告限制
			chunkSizeWarningLimit: 1000,
			// 启用 CSS 代码分割
			cssCodeSplit: true
		},
		plugins: [
			vue(),
			UnoCSS(),
			Components({
				dts: true, // enabled by default if `typescript` is installed
				resolvers: [
					AntDesignVueResolver({
						importStyle: false // css in js
					})
				],
				types: [
					{
						from: 'vue-router',
						names: ['RouterLink', 'RouterView']
					}
				],
				// 自动导入src/components目录下的所有Vue组件
				dirs: ['src/components', 'src/layouts']
			}),
			AutoImport({
				// 自动导入vue相关的API
				imports: [
					'vue',
					'pinia',
					{
						'@/libs/utils/Tool': [['default', 'Tool']],
						'@/libs/api/index': [['default', 'Api']],
						'@/datas/Enums': [['default', 'Enums']],
						'@/datas/Demos': [['default', 'Demos']],
						'@/stores/pinia/Pinia.ts': [['default', 'Pinia']],
						'@/stores/pinia/Test': ['useTestStore'],
						'@/stores/pinia/JwtToken': ['useTokenStore'],
						'@/stores/pinia/Adminer': ['useAdminerStore'],
						'@/stores/pinia/Loading': ['useLoadingStore'],
						'@/stores/pinia/Language': ['useLanguageStore'],
						'@/stores/pinia/Currency': ['useCurrencyStore'],
						'@/libs/utils/i18n': ['t']
					}
				],
				// 指定需要自动导入的目录
				dirs: [],
				dts: true,
				vueTemplate: true, // 在Vue模板中自动导入
				eslintrc: {
					enabled: true, // 生成eslint配置
					filepath: './.eslintrc-auto-import.json', // 生成的文件路径
					globalsPropValue: true // 设置为true，表示全局变量
				}
			})
		],
		css: {
			// 预处理器配置项
			preprocessorOptions: {
				less: {
					math: 'always',
					javascriptEnabled: true
				}
			}
		},
		resolve: {
			alias: {
				// 配置项目别名
				'@': resolve(__dirname, 'src')
			}
		}
	}
})
